<

アプリサイズツールの使用

それは何ですか?

アプリ サイズ ツールを使用すると、アプリの合計サイズを分析できます。 「サイズ情報」の単一スナップショットを表示できます。 を使用して「分析」タブ、または 2 つの異なるものを比較する を使用した「サイズ情報」のスナップショット差分タブ

「サイズ情報」とは何ですか?

「サイズ情報」にはダーツコードのサイズデータが含まれており、 アプリのネイティブ コードと非コード要素、 アプリケーションパッケージ、アセット、フォントなど。 「サイズ」 「情報」ファイルには全体画像のデータが含まれています アプリケーションのサイズに合わせてください。

ダーツのサイズ情報

Dart AOT コンパイラはコードに対してツリーシェイキングを実行します アプリケーションをコンパイルするとき (プロファイル モードまたはリリース モード) のみ - AOT コンパイラはデバッグ ビルドには使用されません。 これは JIT コンパイルされています)。これは、コンパイラが を削除することでアプリのサイズを最適化しようとします。 未使用または到達不能なコード部分。

コンパイラーがコードを可能な限り最適化した後、 最終結果はパッケージのコレクションとして要約できます。 バイナリ出力に存在するライブラリ、クラス、関数、 バイト単位のサイズも併せて表示します。こちらはダーツ部分です アプリサイズツールで分析できる「サイズ情報」 Dart コードを最適化し、サイズの問題を追跡します。

それの使い方

DevTools が実行中のアプリケーションにすでに接続されている場合は、 「アプリのサイズ」タブに移動します。

Screenshot of app size tab

DevTools が実行中のアプリケーションに接続されていない場合は、 起動後に表示されるランディング ページからツールにアクセスします DevTools (を参照)インストール手順)。

Screenshot of app size access on landing page

「分析」タブ

[分析] タブでは、単一のスナップショットを検査できます。 サイズ情報の。階層構造を確認できます ツリーマップとテーブルを使用してサイズ データを取得し、 コードの属性データを表示できます (たとえば、コードの一部がコンパイルされたファイルに含まれる理由など) アプリケーション) ドミネーター ツリーとコール グラフを使用します。

Screenshot of app size analysis

サイズファイルのロード

「分析」タブを開くと、手順が表示されます。 アプリサイズのファイルをロードします。アプリのサイズをドラッグアンドドロップします ファイルをダイアログに入力し、「サイズの分析」をクリックします。

Screenshot of app size analysis loading screen

見るサイズファイルの生成詳細については以下をご覧ください サイズのファイルを生成します。

ツリーマップとテーブル

ツリーマップとテーブルには、アプリのサイズの階層データが表示されます。

ツリーマップの使用

ツリーマップは、階層データを視覚化したものです。 空間が長方形に分割されていて、 ここで、各長方形のサイズと順序は、何らかの定量的なものによって決まります。 変数 (この場合はバイト単位のサイズ)。 各長方形の面積はサイズに比例します ノードはコンパイルされたアプリケーション内に存在します。中身 各長方形 (1 つを A と呼びます) には、追加の データの 1 レベル深いところに存在する四角形 階層 (A の子)。

ツリーマップ内のセルにドリルダウンするには、セルを選択します。 これによりツリーが再ルート化され、選択したセルが ツリーマップの視覚的なルート。

前に戻ったり、上のレベルに移動するには、ブレッドクラムを使用します ツリーマップの上部にあるナビゲーター。

Screenshot of treemap breadcrumb navigator

ドミネーター ツリーとコール グラフ

ページのこのセクションには、コード サイズの属性データが表示されます (たとえば、コードの一部がなぜ コンパイルされたアプリケーション)。このデータは表示されます ドミネーター ツリーおよびコール グラフの形式で。

ドミネーターツリーの使用

あドミネーターツリーは各ノードの 子は、それがすぐに支配するノードです。 ノードaノードを「支配する」と言われますbもしも へのあらゆる道b通過しなければならないa

アプリのサイズ分析のコンテキストで言えば、 想像package:a両方をインポートしますpackage:bpackage:c、 そして両方ともpackage:bpackage:c輸入package:d

package:a
|__ package:b
|   |__ package:d
|__ package:c
    |__ package:d

この例では、package:a支配するpackage:d、 したがって、このデータのドミネーター ツリーは次のようになります。

package:a
|__ package:b
|__ package:c
|__ package:d

この情報は、なぜ特定の理由を理解するのに役立ちます。 コードの一部がコンパイルされたアプリケーションに存在します。 たとえば、アプリのサイズを分析していて、 コンパイルされたアプリに予期しないパッケージが含まれている場合は、 ドミネーター ツリーを使用して、パッケージをそのルート ソースまで追跡します。

Screenshot of code size dominator tree

コールグラフの使用

コール グラフは、ドミネーターに同様の情報を提供します。 コードが存在する理由を理解するのに役立つツリー コンパイルされたアプリケーション内。ただし、表示する代わりに、 コードのノード間の 1 対多の支配的な関係 ドミネーター ツリーのようなサイズ データ、コール グラフは多対多を示します コードサイズデータのノード間に存在する関係。

もう一度、次の例を使用します。

package:a
|__ package:b
|   |__ package:d
|__ package:c
    |__ package:d

このデータのコール グラフはリンクします。package:d直接の呼び出し元に対して、package:bpackage:c、 その「支配者」の代わりに、package:a

package:a --> package:b -->
                              package:d
package:a --> package:c -->

この情報は、 コード部分間のきめ細かい依存関係 (パッケージ、ライブラリ、クラス、関数)。

Screenshot of code size call graph

ドミネーター ツリーとコール グラフを使用する必要がありますか?

を理解したい場合は、ドミネーター ツリーを使用してください。コードの一部が含まれている理由 応用。理解したい場合はコールグラフを使用してください コードへの、またはコードからのすべての呼び出しパス。

ドミネーター ツリーは、コール グラフ データの分析またはスライスです。 ここではノードは「優位性」によって接続されています。 親子階層。親ノードが 子、コール グラフの関係、および ドミネーター ツリーは同一になりますが、常にそうとは限りません。

コールグラフが完成したシナリオでは (エッジはノードの各ペアの間に存在します)、 ドミネーターツリーはそれを示しますrootそれは グラフ内のすべてのノードのドミネーター。 これはコール グラフが示す例です。 コードの一部がなぜそうなるのかをよりよく理解できるようになりました。 あなたのアプリケーションに含まれています。

差分タブ

diff タブでは、2 つのスナップショットを比較できます。 サイズ情報。 2 つのサイズ情報ファイル 比較しているものは 2 つの異なるものから生成される必要があります 同じアプリのバージョン。例えば、 前後に生成されたファイルのサイズ コードを変更します。視覚化できます 2 つのデータセット間の違い ツリーマップとテーブルを使用します。

Screenshot of app size diff

サイズファイルのロード

開くと、差分タブ、 「古い」サイズと「新しい」サイズをロードする手順が表示されます ファイル。繰り返しますが、これらのファイルは次から生成する必要があります。 同じアプリケーションです。これらのファイルを にドラッグ アンド ドロップします。 それぞれのダイアログを開き、差分の分析

Screenshot of app size diff loading screen

見るサイズファイルの生成以下の情報を参照してください これらのファイルの生成時に。

ツリーマップとテーブル

diff ビューでは、ツリーマップとツリー テーブルが表示されます。 インポートされた 2 つのサイズ ファイル間で異なるデータのみ。

ツリーマップの使用に関する質問については、次を参照してください。ツリーマップの使用その上。

サイズファイルの生成

アプリ サイズ ツールを使用するには、 flutter サイズ解析ファイル。このファイルにはサイズが含まれています アプリケーション全体の情報 (ネイティブ コード、 Dart コード、アセット、フォントなど)、を使用して生成できます。--analyze-size国旗:

flutter build <your target platform> --analyze-size

これによりアプリケーションが構築され、サイズの概要が出力されます コマンドラインに入力し、行を出力します サイズ分析ファイルの場所を示します。

flutter build apk --analyze-size --target-platform=android-arm64
...
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
app-release.apk (total compressed)                               6 MB
...
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
A summary of your APK analysis can be found at: build/apk-code-size-analysis_01.json

この例では、build/apk-code-size-analysis_01.jsonファイルをアプリ サイズ ツールに取り込み、さらに分析します。 詳細については、を参照してください。アプリのサイズに関するドキュメント

その他のリソース

段階的なサイズ分析を実行する方法を学ぶには、 DevTools を使用した素晴らしいアプリです。アプリ サイズ ツールのチュートリアル。さまざまな戦略 アプリのサイズを削減する方法についても説明します。

edc4d4fb-0b0b-4849-a8c5-571ba0c4bc5​​d